<template>
<div class="backstagemain">
    <h2 class="backstageheader">市场管理</h2>
    <div class="backstagesearch">
        <div class="backstageuserstatus">
            <label>状态:</label>
            <select>
                <option>未审核</option>
                <option>已审核</option>
            </select>
        </div>
        <div class="namesearch">
            <label>商品分类:</label>
            <input type="text" autocomplete="off" placeholder="请输入用户名称">
        </div>
        <div class="schoolsearch">
            <label>商品名称:</label>
            <input type="text" autocomplete="off" placeholder="请输入学校名称">
        </div>
        <div class="backstagebuttons">
            <button class="backstagesearchbtn">搜索</button>
            <button class="backstagenewstart">重置</button>
        </div>
    </div>
    <div class="backstagecontrol">
        <button type="button" class="backstagedeleteall">删除所选</button>
        <button type="button" class="backstageadd">新增</button>
    </div>
    <div class="backstagetablediv">
        <table class="backstagetable">
          <thead>
            <tr>
              <th>选择</th>
              <th>状态</th>
              <th>商品分类</th>
              <th>商品名称</th>
              <th>商品图片</th>
              <th>商品描述</th>
              <th>卖家信息</th>
              <th>操作</th>
            </tr>
          </thead>
            <tbody>
                <MarketadminItem       
                  v-for="(marketObj,id) in markets" 
                  :key="id"
                  :market="marketObj"/>
            </tbody>
        </table>
    </div>
    <DividePage :maxsize="5" :itemLength="markets.length" :pagesizes="pagesizes"/>
</div>
</template>

<script>
import MarketadminItem from './MarketadminItem.vue'
import DividePage from '../DividePage.vue'
export default {
    name: 'Marketadmin',
    components:{DividePage,MarketadminItem},
    // props:['markets'],
    data(){
        return{
            markets:[
                {
                    id:'001',
                    status:'未审核',
                    type:'电子产品',
                    name:'充电宝',
                    photo:['https://s3.ax1x.com/2021/01/16/srJlq0.jpg'],
                    text:'2000000mA超大充电宝，你值得拥有',
                    message:'信工学院大二一男子',
                },
                 {
                    id:'002',
                    status:'未审核',
                    type:'电子产品',
                    name:'充电宝',
                    photo:['https://s3.ax1x.com/2021/01/16/srJlq0.jpg'],
                    text:'2000000mA超大充电宝，你值得拥有',
                    message:'信工学院大二一男子',
                },
                 {
                    id:'003',
                    status:'未审核',
                    type:'电子产品',
                    name:'充电宝',
                    photo:['https://s3.ax1x.com/2021/01/16/srJlq0.jpg'],
                    text:'2000000mA超大充电宝，你值得拥有',
                    message:'信工学院大二一男子',
                }
            ],
            pagesizes:[3]
        }
    }
}
</script>

<style lang="less" scoped>
// .main{
//         grid-area: main;
//         padding: 45px;
//         color: rgb(100, 100, 100);
//         .header{
//             padding-bottom: 16px;
//             border-bottom: 1px solid #eee;
//             margin-top: 10px;
//             margin-bottom: 10px;
//             font-size: 32px;
//         }
//         .search{
//             width: 100%;
//             min-height: 50px;
//             padding: 5px;
//             // background-color: black;
//             .userstatus{
//                 width: 120px;
//                 select{
//                     width: 70px;
//                     height: 30px;
//                     margin: 0 2px 0 8px;
//                     background-color: #fff;
//                     border-radius: 4px;
//                     border: 1px solid #dcdfe6;
//                     box-sizing: border-box;
//                     color: #606266;
//                     display: inline-block;
//                     font-size: inherit;
//                     outline: none;
//                 }
//             }
//             div{
//                 width: 200px;
//                 height: 40px;
//                 display: inline-block;
//                 margin-right: 10px;
//                 vertical-align: top;
//                 // margin-bottom: 22px;
//                 // background-color: yellow;
//                 label{
//                     width: 60px;
//                     height: 40px;
//                     font-size: 16px;
//                 }
//                 input{
//                     width: 120px;
//                     height: 30px;
//                     margin: 0 2px 0 8px;
//                     background-color: #fff;
//                     border-radius: 4px;
//                     border: 1px solid #dcdfe6;
//                     box-sizing: border-box;
//                     color: #606266;
//                     display: inline-block;
//                     font-size: inherit;
//                     outline: none;
//                     padding: 0 7px;
//                 }
//             }
//             .buttons{
//                 width: 160px;
//                 height: 30px;
//                 margin: 0;
//                 // background-color: yellow;
//                 button{
//                     display: inline-block;
//                     line-height: 1;
//                     white-space: nowrap;
//                     cursor: pointer;
//                     background: #fff;
//                     border: 1px solid #dcdfe6;
//                     border-color: #dcdfe6;
//                     color: #606266;
//                     text-align: center;
//                     box-sizing: border-box;
//                     outline: none;
//                     margin: 0;
//                     font-weight: 400;
//                     padding: 7px 20px;
//                     font-size: 14px;
//                     border-radius: 4px;
//                 }
//                 button:hover{
//                     background: #46a6ff;
//                     border-color: #46a6ff;
//                     color: #fff;
//                 }
//                 .searchbtn{
//                     color: #fff;
//                     background-color: #1890ff;
//                     border-color: #1890ff;
//                     margin-right: 12px;
//                 }
//             }
//         }
//         .control{
//             width: 100%;
//             height: 45px;
//             // background-color: black;
//             padding-top: 15px;
//             button{
//                 display: inline-block;
//                 line-height: 1;
//                 white-space: nowrap;
//                 cursor: pointer;
//                 border: 1px solid #dcdfe6;
//                 text-align: center;
//                 box-sizing: border-box;
//                 outline: none;
//                 margin: 0;
//                 font-weight: 400;
//                 padding: 7px 15px;
//                 font-size: 12px;
//                 border-radius: 3px;
//             }
//             .deleteall{
//                 color: #ff9292;
//                 background-color: #ffeded;
//                 border-color: #ffdbdb;
//                 margin-right: 15px;
//             }
//             .deleteall:hover{
//                 color: #ffeded;
//                 background-color: #ff9292;
//                 border-color: #ff9292;
//             }
//             .add{
//                 color: #1890ff;
//                 background: #e8f4ff;
//                 border-color: #a3d3ff;
//             }
//             .add:hover{
//                 color: #fff;
//                 background-color: #1890ff;
//                 border-color: #1890ff;
//             }
//         }
//         // .btn{
//         //     display: inline-block;
//         //     margin-bottom: 0;
//         //     font-weight: 400;
//         //     text-align: center;
//         //     white-space: nowrap;
//         //     vertical-align: middle;
//         //     cursor: pointer;
//         //     background-image: none;
//         //     border: 1px solid transparent;
//         //     padding: 6px 12px;
//         //     font-size: 14px;
//         //     border-radius: 4px;
//         //     color:snow;
//         // }
//         // .btn:focus{
//         //     outline: none;
//         // }
//         // .btn1{
//         //     color: #fff;
//         //     background-color: #5cb85c;
//         //     border-color: #4cae4c;
//         // }
//         // .btn1:link,.btn1:hover,.btn1:visited{
//         //     color: #fff;
//         //     background-color: #5cb85c;
//         //     border-color: #4cae4c;
//         // }
//         // .btn2{
//         //     display: inline-block;
//         //     margin-bottom: 0;
//         //     font-weight: 400;
//         //     text-align: center;
//         //     white-space: nowrap;
//         //     vertical-align: middle;
//         //     cursor: pointer;
//         //     background-image: none;
//         //     border: 1px solid transparent;
//         //     padding: 6px 12px;
//         //     font-size: 14px;
//         //     border-radius: 4px;
//         //     color:snow;
//         //     background-color: skyblue;
//         // }
//         .tablediv{
//             overflow-x: auto;
//             .table{
//                 width: 100%;
//                 max-width: 100%;
//                 margin-bottom: 20px;
//                 margin-top: 20px;
//                 font-size: 16px;
//             }
//         }
//         .form-group{
//             margin-bottom: 15px;
//             label {
//                 display: inline-block;
//                 max-width: 100%;
//                 margin-bottom: 5px;
//                 font-weight: 700;
//             }
//             .form-control {
//                 display: block;
//                 width: 100%;
//                 height: 34px;
//                 padding: 6px 12px;
//                 font-size: 14px;
//                 color: #555;
//                 background-color: #fff;
//                 background-image: none;
//                 border: 1px solid #ccc;
//                 border-radius: 4px;
//             }
//         }
//     }
</style>